<template>
	<view class="body pt40" style="background-image: url(/static/image/bg.jpg);">
		<view class="pl40 pr40">
			<up-tabs :list="data.menu" :current="data.current" lineColor='#000'
				activeStyle='color:#000;font-weight:bold;font-size: 36rpx;' @change="setMenu"></up-tabs>
		</view>
		<view class="mt40" v-if="data.current==0">
			<view class="menu br30 bg-white d-b-c  pl60 pr60">
				<view @click="setMindex(index)" class="item tc pt30 pb30 pl20 pr20 br12"
					:class="data.mIndex==index?'active white':''" v-for="(item,index) in data.menus" :key="index">
					<!-- <image :src="data.mIndex==index?item.icon_on:item.icon" mode="aspectFill"></image> -->
					<view class="iconfont f54" :class="item.icon"></view>
					<view class="f24 mt10">{{item.title}}</view>
				</view>
			</view>
			<up-tabs :list="data.status" :current="data.sIndex" lineColor='#ff8d22' activeStyle='color:#ff8d22'
				@change="setsIndex" :scrollable='false'></up-tabs>
			<view class="list mt20 p20" v-if="data.list.length>0">
				<view class="item d-b-c br12 p20 bg-white mb20" v-for="(item,index) in data.list" :key="index">
					<view class="left br20 p20">
						<view class="iconfont f54"
							:class="item.type==1?'icon-a-caigou1':item.type==2?'icon-chalvchuhang':item.type==3?'icon-canyin':item.type==4?'icon-zhusu':'icon-quanbu'">
						</view>
					</view>
					<view class="right flex-1 d-s-s d-c ml20">
						<view class="title ww100 d-b-c mb10"><text class="fb f34">{{item.title}}</text> <text
								class="f30">￥{{item.money}}</text> </view>
						<up-tag color="#ff8d22" bgColor="#fff1e6" borderColor="transparent" :text="item.typename"
							size="mini"></up-tag>
						<view class="sub f28 mt10">开票日期: {{item.addDate}}</view>
						<view class="btn ww100 flex-1 d-e-c mt20">
							<view class="mr20"><up-button text="删除" plain shape="circle" size="mini"></up-button></view>
							<view><up-button text="转交" color="#ff8d22" plain shape="circle" size="mini"></up-button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<up-empty v-else mode="list" marginTop="20vh" text="暂无列表"></up-empty>
		</view>
		<view class="mt40" v-if="data.current==1">
			<view class="list mt20 p20" v-if="data.list.length>0">
				<view class="item br12 p20 bg-white mb20" v-for="(item,index) in data.list2" :key="index">
					<view class="top mb20" :class="item.show?'line pb20':''">
						<view class="sub f28">{{item.moon}} 应发工资</view>
						<view class="d-b-c mt10">
							<view class="f40 money ">{{item.all}}<text class="f28">元</text> </view>
							<view @click="setShow(index)" class="d-c-c f24 p10 sub more" :class="item.show?'show':''">
								<view class="iconfont icon-xiala1"></view> {{item.show?'收起':'查看详细'}}
							</view>
						</view>
					</view>
					<view class="content d-b-c f28 " :style="[{maxHeight:item.show?'999px':'0px'}]">
						<view class="i1 flex-1 mr30 pr30">
							<view class="d-b-c mb20">
								<text class="sub name">基本工资</text><text>{{item.jb}}元</text>
							</view>
							<view class="d-b-c mb20">
								<text class="sub name">加班工资</text><text>{{item.jb1}}元</text>
							</view>
							<view class="d-b-c">
								<text class="sub name">社保</text><text>{{item.sb}}元</text>
							</view>
						</view>
						<view class="i1 flex-1">
							<view class="d-b-c mb20">
								<text class="sub name">全勤</text><text>{{item.qq}}元</text>
							</view>
							<view class="d-b-c mb20">
								<text class="sub name">技术津贴</text><text>{{item.js}}元</text>
							</view>
							<view class="d-b-c red">
								<text class="fb name">销售奖金</text><text>{{item.xs}}元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<up-empty v-else mode="list" marginTop="20vh" text="暂无列表"></up-empty>
		</view>
		<view class="pos br-50 p10" @click="store.commit('jump','/pages/wipe/add')">
			<up-icon name="plus" bold size='20' color='#fff'></up-icon>
		</view>
	</view>
</template>
<script setup>
	import { reactive } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	import { useStore } from "vuex"
	import { test } from '@/uni_modules/uview-plus';
	const store = useStore()
	const data = reactive({
		list2: [{
			moon: '8月',
			all: '6900',
			jb: '6200',
			jb1: '500',
			sb: '-500',
			qq: "100",
			js: "100",
			xs: "500",
			show: false
		},{
			moon: '8月',
			all: '6900',
			jb: '6200',
			jb1: '500',
			sb: '-500',
			qq: "100",
			js: "100",
			xs: "500",
			show: false
		},{
			moon: '8月',
			all: '6900',
			jb: '6200',
			jb1: '500',
			sb: '-500',
			qq: "100",
			js: "100",
			xs: "500",
			show: false
		},{
			moon: '8月',
			all: '6900',
			jb: '6200',
			jb1: '500',
			sb: '-500',
			qq: "100",
			js: "100",
			xs: "500",
			show: false
		}],
		list: [{
			title: "佛山弟弟出行优先公司",
			money: "63.00",
			addDate: "2024-08-08",
			type: 1,
			typename: "出行"
		}, {
			title: "佛山弟弟出行优先公司",
			money: "63.00",
			addDate: "2024-08-08",
			typename: "住宿",
			type: 4,
		}],
		menu: [{
			name: "个人报销"
		}, {
			name: "工资单内容"
		}],
		current: 1,
		menus: [{
			icon: "icon-quanbu",
			title: "全部"
		}, {
			icon: "icon-a-caigou1",
			title: "采购"
		}, {
			icon: "icon-chalvchuhang",
			title: "出行"
		}, {
			icon: "icon-canyin",
			title: "餐饮"
		}, {
			icon: "icon-zhusu",
			title: "住宿"
		}],
		mIndex: 0,
		status: [{
			name: "待处理"
		}, {
			name: "已处理"
		}],
		sIndex: 0
	})

	function setMindex(i) {
		data.mIndex = i
	}

	function setsIndex(e) {
		data.sIndex = e.index
	}

	function setMenu(e) {
		data.current = e.index
	}

	function setShow(i) {
		data.list2[i].show = !data.list2[i].show
	}
</script>
<style scoped lang="scss">
	.list {
		.money {
			color: #4285DC;
		}

		.i1 {
			&:nth-child(1) {
				border-right: 1px solid #eee;
			}

			.name {
				position: relative;
				width: 4em;

				&:before {
					content: "";
					position: absolute;
					border-bottom: 1px dashed #eee;
					width: 80rpx;
					left: 110%;
					bottom: 40%;
					transform: translateY(-50%);
					height: 1px;
				}
			}
		}

		.more {
			background-color: #F2F2F4;
		}

		.content {
			overflow: hidden;
			transition: 0.5s;
		}

		.more.show {
			.iconfont {
				transform: rotate(180deg);
				transition: 0.5s;
			}
		}

		.left {
			background-color: #f3f3f3;

			.iconfont {
				color: #ff8d22;
			}
		}
	}

	.menu {
		.item {
			image {
				width: 48rpx;
				height: 48rpx;
				margin: 0 auto;
				display: block;
			}
		}

		.active {
			background-color: #009dfd;
			box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(13, 77, 117, 0.66);
		}
	}

	.body {
		position: relative;

		.pos {
			position: fixed;
			background-color: #009dfe;
			right: 40rpx;
			bottom: 40rpx;
		}
	}
</style>